<template>
  <div>
    <wx-open-audio
      id="audio"
      :title="title"
      src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3"
    >
      <script type="text/wxtag-template">
        <button>播放</button>
      </script>
    </wx-open-audio>
  </div>
</template>

<script>
import axios from "axios";
import VConsole from 'vconsole/dist/vconsole.min.js'
export default {
  name: 'HelloWorld',
  data: function () {
    return {
      title: "test",
    };
  },
  mounted() {
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var _this = this;
      var vConsole = new VConsole();
      const url = "http://test.kuailetingba.cn/liontest/wechat/signature"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          url: window.location.href.split("#")[0],
        }
      );
      axios.post(url, data).then((response) => {
        let result = response.data ? response.data : {};
        let params = result.data || {};
        console.log("params：", params);
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: params.appid || "", // 必填，公众号的唯一标识
          timestamp: params.timestamp || 0, // 必填，生成签名的时间戳
          nonceStr: params.noncestr || "", // 必填，生成签名的随机串
          signature: params.signature || "", // 必填，签名
          jsApiList: ["closeWindow"], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-audio"],
        });
      });

      const audio = document.getElementById("audio");
      audio.addEventListener("ready", function (e) {
        console.log("audio ready");
      });
      audio.addEventListener("play", function (e) {
        console.log("audio play");
      });
      audio.addEventListener("pause", function (e) {
        console.log("audio pause");
      });
      audio.addEventListener("timeupdate", function (event) {
        console.log("audio timeupdate");
        const state = event.detail;
        console.log(state.src); // 当前音频来源
        console.log(state.title); // 当前音频标题
        console.log(state.episode); // 当前专辑名称
        console.log(state.singer); // 当前歌手名称
        console.log(state.cover); // 当前专辑封面
        console.log(state.playState); // 播放状态，'playing' | 'pause' | 'seeked'
        console.log(state.paused); // 是否暂停
        console.log(state.buffered); // 已缓冲位置，单位秒
        console.log(state.currentTime); // 当前播放位置，单位秒
      });
      audio.addEventListener("error", function (event) {
        console.log("audio error");
        const error = event.detail;
        console.log(error.errMsg);
      });
// 微信版本不支持微信开放标签时的错误信息监听
      document.addEventListener("WeixinOpenTagsError", (e) => {
// 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
        console.error("open tags error====", e.detail.errMsg);
        this.isWXOpenTagAudio = false;
        console.log("=======is wx open tag audio ===", this.isWXOpenTagAudio);
      });
    },
  },
};
</script>
